<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端答题系统</title>
    <!-- Tailwind CSS v3 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <!-- 统一的 Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#60a5fa',
                        accent: '#2563eb',
                        light: '#f3f4f6',
                        dark: '#1e3a8a'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .glass-effect {
                background: rgba(255, 255, 255, 0.7);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.2);
            }
            .tab-shadow {
                box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
            }
            .card-shadow {
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
            }
            .progress-ring-circle {
                transition: stroke-dashoffset 0.35s;
                transform: rotate(-90deg);
                transform-origin: 50% 50%;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
    <!-- 登录页面 -->
    <div id="login-page" class="min-h-screen flex flex-col items-center justify-center p-4 bg-gradient-to-b from-blue-50 to-white">
        <div class="w-full max-w-md">
            <div class="text-center mb-10">
                <!-- <div class="inline-block p-3 rounded-full bg-blue-100 mb-4">
                    <svg class="w-12 h-12 text-primary" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 3.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM3.5 10a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path>
                        <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
                    </svg>
                </div> -->
                <img src="logo.png" alt="调度所答题系统 Logo" class="h-10 mx-auto block" />
                <p class="text-gray-500 mt-2">提升专业知识，共建高效团队</p>
            </div>
            
            <div class="bg-white rounded-xl p-6 card-shadow">
                <form id="login-form" class="space-y-4">
                    <div>
                        <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                </svg>
                            </span>
                            <input type="text" id="username" name="username" class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入用户名" required>
                        </div>
                    </div>
                    
                    <div>
                        <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                                </svg>
                            </span>
                            <input type="password" id="password" name="password" class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入密码" required>
                        </div>
                    </div>
                    
                    <!-- <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                            <label for="remember-me" class="ml-2 block text-sm text-gray-700">记住我</label>
                        </div>
                        <a href="#" class="text-sm text-primary hover:text-accent">忘记密码?</a>
                    </div> -->
                    
                    <button type="submit" class="w-full bg-primary text-white py-2 px-4 rounded-lg hover:bg-accent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors duration-200">
                        登录
                    </button>
                </form>
            </div>
            
            <p class="text-center text-gray-500 text-sm mt-6">© 2025 北京铁路局调度所</p>
        </div>
    </div>

    <!-- 主应用页面 -->
    <div id="app-page" class="hidden min-h-screen flex flex-col">
        <!-- 顶部导航栏 -->
        <header class="bg-white shadow-sm z-10">
            <div class="container mx-auto px-4 py-3 flex items-center justify-between">
                <h1 class="text-lg font-semibold text-gray-800" id="page-title">首页</h1>
                <div class="flex items-center space-x-4">
                    <button id="notification-btn" class="text-gray-500 hover:text-primary">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
                        </svg>
                    </button>
                    <div class="relative" id="user-menu">
                        <button id="user-menu-btn" class="flex items-center space-x-2 focus:outline-none">
                            <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/2bd93a0353ee43da92ae3db1afe44556~tplv-a9rns2rl98-image.image?rcl=2025102222044388735DCFE50015A5504E&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1763733912&x-signature=lQ02EQ0lT3nhWU7GJ7yqshDOYPE%3D" alt="用户头像" class="w-8 h-8 rounded-full border-2 border-primary">
                            <span class="text-sm font-medium text-gray-700 hidden sm:block">张三</span>
                            <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </button>
                        <div id="user-dropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 hidden">
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人资料</a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">设置</a>
                            <a href="#" id="logout-btn" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">退出登录</a>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主内容区域 -->
        <main class="flex-1 overflow-y-auto">
            <!-- 首页内容 -->
            <div id="home-page" class="p-4">
                <!-- 用户信息卡片 -->
                <div class="bg-white rounded-xl p-4 mb-6 card-shadow">
                    <div class="flex items-center">
                        <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/2bd93a0353ee43da92ae3db1afe44556~tplv-a9rns2rl98-image.image?rcl=2025102222044388735DCFE50015A5504E&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1763733912&x-signature=lQ02EQ0lT3nhWU7GJ7yqshDOYPE%3D" alt="用户头像" class="w-16 h-16 rounded-full border-2 border-primary">
                        <div class="ml-4">
                            <h2 class="text-lg font-semibold text-gray-800">崔明剑</h2>
                            <p class="text-sm text-gray-500">安全教育室</p>
                        </div>
                        <div class="ml-auto text-right">
                            <p class="text-sm text-gray-500">当前积分</p>
                            <p class="text-2xl font-bold text-primary">1,250</p>
                        </div>
                    </div>
                </div>

                <!-- 排名信息 -->
                <div class="grid grid-cols-2 gap-4 mb-6">
                    <div class="bg-white rounded-xl p-3 card-shadow">
                        <div class="flex items-center justify-between">
                            <h3 class="text-sm font-medium text-gray-600">科室内排名</h3>
                            <span class="text-xs px-2 py-1 bg-blue-100 text-primary rounded-full">第 3 名</span>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">科室人数：5</p>
                    </div>
                    
                    <div class="bg-white rounded-xl p-3 card-shadow">
                        <div class="flex items-center justify-between">
                            <h3 class="text-sm font-medium text-gray-600">总排名</h3>
                            <span class="text-xs px-2 py-1 bg-blue-100 text-primary rounded-full">第 10 名</span>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">总人数：120</p>
                    </div>
                </div>

                <!-- 学习进度（最近6个月答题数量） -->
                <div class="bg-white rounded-xl p-4 mb-6 card-shadow">
                    <h3 class="text-sm font-medium text-gray-500 mb-4">答题数量</h3>
                    <div class="h-48">
                        <canvas id="learning-progress-chart"></canvas>
                    </div>
                </div>

                <!-- 最近6个月整体排名趋势 -->
                <div class="bg-white rounded-xl p-4 mb-6 card-shadow">
                    <h3 class="text-sm font-medium text-gray-500 mb-4">总排名趋势</h3>
                    <div class="h-48">
                        <canvas id="overall-rank-trend-chart"></canvas>
                    </div>
                </div>

                <!-- 快捷功能 -->
                <!-- <div class="grid grid-cols-2 gap-4 mb-6">
                    <button id="start-quiz-btn" class="bg-primary text-white rounded-xl p-4 flex flex-col items-center justify-center hover:bg-accent transition-colors duration-200">
                        <svg class="w-8 h-8 mb-2" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z"></path>
                        </svg>
                        <span class="font-medium">开始答题</span>
                    </button>
                    
                    <button id="practice-record-btn" class="bg-white text-primary border border-primary rounded-xl p-4 flex flex-col items-center justify-center hover:bg-blue-50 transition-colors duration-200">
                        <svg class="w-8 h-8 mb-2" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"></path>
                        </svg>
                        <span class="font-medium">练习记录</span>
                    </button>
                </div> -->

                <!-- 排行榜 -->
                <!-- <div class="bg-white rounded-xl p-4 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-sm font-medium text-gray-500">科室排行榜</h3>
                        <a href="#" id="view-all-ranks-btn" class="text-xs text-primary hover:text-accent">查看全部</a>
                    </div>
                    <div class="space-y-3">
                        <div class="flex items-center p-2 bg-yellow-50 rounded-lg">
                            <div class="w-6 h-6 bg-yellow-400 text-white rounded-full flex items-center justify-center text-xs font-bold">2</div>
                            <div class="ml-3 flex-1">
                                <p class="text-sm font-medium text-gray-800">调度二室</p>
                                <div class="flex items-center mt-1">
                                    <div class="w-full bg-gray-200 rounded-full h-1.5">
                                        <div class="bg-yellow-400 h-1.5 rounded-full" style="width: 85%"></div>
                                    </div>
                                    <span class="ml-2 text-xs text-gray-500">85分</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="flex items-center p-2 bg-blue-50 rounded-lg">
                            <div class="w-6 h-6 bg-blue-400 text-white rounded-full flex items-center justify-center text-xs font-bold">1</div>
                            <div class="ml-3 flex-1">
                                <p class="text-sm font-medium text-gray-800">安全教育室</p>
                                <div class="flex items-center mt-1">
                                    <div class="w-full bg-gray-200 rounded-full h-1.5">
                                        <div class="bg-blue-400 h-1.5 rounded-full" style="width: 92%"></div>
                                    </div>
                                    <span class="ml-2 text-xs text-gray-500">92分</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="flex items-center p-2 bg-orange-50 rounded-lg">
                            <div class="w-6 h-6 bg-orange-400 text-white rounded-full flex items-center justify-center text-xs font-bold">3</div>
                            <div class="ml-3 flex-1">
                                <p class="text-sm font-medium text-gray-800">信息技术室</p>
                                <div class="flex items-center mt-1">
                                    <div class="w-full bg-gray-200 rounded-full h-1.5">
                                        <div class="bg-orange-400 h-1.5 rounded-full" style="width: 78%"></div>
                                    </div>
                                    <span class="ml-2 text-xs text-gray-500">78分</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->
            </div>

            <!-- 答题页面 -->
            <div id="quiz-page" class="hidden p-4">
                <div class="bg-white rounded-xl p-4 mb-6 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center">
                            <span class="text-xs px-2 py-1 bg-blue-100 text-primary rounded-full">问题 1/10</span>
                            <span class="ml-2 text-xs text-gray-500">单选题</span>
                        </div>
                        <div class="flex items-center">
                            <svg class="w-4 h-4 text-red-500 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 000 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-xs text-red-500" id="quiz-timer">60秒</span>
                        </div>
                    </div>
                    
                    <h2 class="text-lg font-medium text-gray-800 mb-4">货物列车在区间被迫停车后,司机发现车辆脱轨，应首先执行的操作是：</h2>
                    
                    <div class="space-y-3 mb-6">
                        <div class="quiz-option border border-gray-200 rounded-lg p-3 cursor-pointer hover:bg-gray-50">
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" name="quiz-answer" value="A" class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                                <span class="ml-3 text-gray-700">选项A：立即请求救援</span>
                            </label>
                        </div>
                        
                        <div class="quiz-option border border-gray-200 rounded-lg p-3 cursor-pointer hover:bg-gray-50">
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" name="quiz-answer" value="B" class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                                <span class="ml-3 text-gray-700">选项B：设置响墩防护</span>
                            </label>
                        </div>
                        
                        <div class="quiz-option border border-gray-200 rounded-lg p-3 cursor-pointer hover:bg-gray-50">
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" name="quiz-answer" value="C" class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                                <span class="ml-3 text-gray-700">选项C：检查脱轨车辆位置并记录</span>
                            </label>
                        </div>
                        
                        <div class="quiz-option border border-gray-200 rounded-lg p-3 cursor-pointer hover:bg-gray-50">
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" name="quiz-answer" value="D" class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                                <span class="ml-3 text-gray-700">选项D：向车站值班员报告脱轨位置、数量及是否影响邻线</span>
                            </label>
                        </div>
                    </div>
                    
                    <div class="flex justify-between">
                        <button id="prev-question-btn" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                            上一题
                        </button>
                        <button id="next-question-btn" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-accent">
                            下一题
                        </button>
                    </div>
                </div>
            </div>

            <!-- 资料页面 -->
            <div id="materials-page" class="hidden">
                <div class="flex h-full">
                    <!-- 左侧类别导航 -->
                    <div class="w-1/4 bg-white shadow-sm overflow-y-auto">
                        <div class="p-4">
                            <h3 class="text-sm font-medium text-gray-500 mb-4">资料分类</h3>
                            <div class="space-y-1">
                                <a href="#" class="material-category block px-3 py-2 text-sm font-medium text-primary bg-blue-50 rounded-md">规章制度</a>
                                <a href="#" class="material-category block px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-md">操作规程</a>
                                <a href="#" class="material-category block px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-md">安全知识</a>
                                <a href="#" class="material-category block px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-md">技术标准</a>
                                <a href="#" class="material-category block px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-md">应急处置</a>
                                <a href="#" class="material-category block px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-md">案例分析</a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 右侧文档列表 -->
                    <div class="w-3/4 bg-gray-50 overflow-y-auto">
                        <div class="p-4">
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="text-sm font-medium text-gray-500">规章制度</h3>
                                <div class="relative">
                                    <input type="text" placeholder="搜索文档..." class="w-full pl-8 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                                        </svg>
                                    </span>
                                </div>
                            </div>
                            
                            <div class="space-y-3">
                                <div class="bg-white rounded-lg p-3 flex items-center hover:shadow-sm transition-shadow">
                                    <div class="w-10 h-10 bg-red-100 text-red-500 rounded flex items-center justify-center">
                                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path>
                                        </svg>
                                    </div>
                                    <div class="ml-3 flex-1">
                                        <h4 class="text-sm font-medium text-gray-800">调度操作规程</h4>
                                        <p class="text-xs text-gray-500 mt-1">2.5MB · 2023-07-15</p>
                                    </div>
                                    <button class="text-primary hover:text-accent" aria-label="查看">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.522 5 12 5s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S3.732 16.057 2.458 12z"></path>
                                        </svg>
                                    </button>
                                </div>
                                
                                <div class="bg-white rounded-lg p-3 flex items-center hover:shadow-sm transition-shadow">
                                    <div class="w-10 h-10 bg-red-100 text-red-500 rounded flex items-center justify-center">
                                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path>
                                        </svg>
                                    </div>
                                    <div class="ml-3 flex-1">
                                        <h4 class="text-sm font-medium text-gray-800">安全生产管理制度</h4>
                                        <p class="text-xs text-gray-500 mt-1">1.8MB · 2023-06-22</p>
                                    </div>
                                    <button class="text-primary hover:text-accent" aria-label="查看">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.522 5 12 5s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S3.732 16.057 2.458 12z"></path>
                                        </svg>
                                    </button>
                                </div>
                                
                                <div class="bg-white rounded-lg p-3 flex items-center hover:shadow-sm transition-shadow">
                                    <div class="w-10 h-10 bg-red-100 text-red-500 rounded flex items-center justify-center">
                                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path>
                                        </svg>
                                    </div>
                                    <div class="ml-3 flex-1">
                                        <h4 class="text-sm font-medium text-gray-800">调度人员职责规定</h4>
                                        <p class="text-xs text-gray-500 mt-1">1.2MB · 2023-05-30</p>
                                    </div>
                                    <button class="text-primary hover:text-accent" aria-label="查看">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.522 5 12 5s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S3.732 16.057 2.458 12z"></path>
                                        </svg>
                                    </button>
                                </div>
                                
                                <div class="bg-white rounded-lg p-3 flex items-center hover:shadow-sm transition-shadow">
                                    <div class="w-10 h-10 bg-red-100 text-red-500 rounded flex items-center justify-center">
                                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path>
                                        </svg>
                                    </div>
                                    <div class="ml-3 flex-1">
                                        <h4 class="text-sm font-medium text-gray-800">调度指挥中心工作规范</h4>
                                        <p class="text-xs text-gray-500 mt-1">2.1MB · 2023-04-18</p>
                                    </div>
                                    <button class="text-primary hover:text-accent" aria-label="查看">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.522 5 12 5s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S3.732 16.057 2.458 12z"></path>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 我的页面 -->
            <div id="profile-page" class="hidden p-4">
                <!-- 个人信息卡片 -->
                <div class="bg-white rounded-xl p-4 mb-6 card-shadow">
                    <div class="flex items-center">
                        <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/2bd93a0353ee43da92ae3db1afe44556~tplv-a9rns2rl98-image.image?rcl=2025102222044388735DCFE50015A5504E&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1763733912&x-signature=lQ02EQ0lT3nhWU7GJ7yqshDOYPE%3D" alt="用户头像" class="w-16 h-16 rounded-full border-2 border-primary">
                        <div class="ml-4">
                            <h2 class="text-lg font-semibold text-gray-800">崔明剑</h2>
                            <p class="text-sm text-gray-500">安全教育室</p>
                            <div class="flex items-center mt-2">
                                <span class="text-xs px-2 py-1 bg-blue-100 text-primary rounded-full">积分：1,250</span>
                                <span class="text-xs px-2 py-1 bg-gray-100 text-gray-600 rounded-full ml-2">总答题数：120题</span>
                                <span class="text-xs px-2 py-1 bg-gray-100 text-gray-600 rounded-full ml-2">正确率：85%</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 功能菜单 -->
                <div class="grid grid-cols-2 gap-4 mb-6">
                    <a href="#" class="bg-white rounded-xl p-4 flex items-center hover:shadow-sm transition-shadow">
                        <div class="w-10 h-10 bg-red-100 text-red-500 rounded-full flex items-center justify-center">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                            </svg>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-gray-800">全部错题</h3>
                            <p class="text-xs text-gray-500">15题需要复习</p>
                        </div>
                    </a>
                    
                    <a href="#" class="bg-white rounded-xl p-4 flex items-center hover:shadow-sm transition-shadow">
                        <div class="w-10 h-10 bg-green-100 text-green-500 rounded-full flex items-center justify-center">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 000 2h6a1 1 0 100-2H7zm5-1a1 1 0 011 1v3a1 1 0 01-2 0V9a1 1 0 011-1z" clip-rule="evenodd"></path>
                            </svg>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-gray-800">练习记录</h3>
                            <p class="text-xs text-gray-500">最近练习：2025-10-27</p>
                        </div>
                    </a>
                    
                    <!-- <a href="#" class="bg-white rounded-xl p-4 flex items-center hover:shadow-sm transition-shadow">
                        <div class="w-10 h-10 bg-blue-100 text-blue-500 rounded-full flex items-center justify-center">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z"></path>
                            </svg>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-gray-800">学习统计</h3>
                            <p class="text-xs text-gray-500">总答题数：120题</p>
                        </div>
                    </a>
                    
                    <a href="#" class="bg-white rounded-xl p-4 flex items-center hover:shadow-sm transition-shadow">
                        <div class="w-10 h-10 bg-purple-100 text-purple-500 rounded-full flex items-center justify-center">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"></path>
                            </svg>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-gray-800">帮助中心</h3>
                            <p class="text-xs text-gray-500">常见问题解答</p>
                        </div>
                    </a> -->
                </div>

                <!-- 设置选项 -->
                <div class="bg-white rounded-xl p-4 card-shadow">
                    <h3 class="text-sm font-medium text-gray-500 mb-4">设置</h3>
                    <div class="space-y-4">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                                    <svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"></path>
                                    </svg>
                                </div>
                                <span class="ml-3 text-sm text-gray-700">个人信息</span>
                            </div>
                            <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </div>
                        
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                                    <svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path>
                                    </svg>
                                </div>
                                <span class="ml-3 text-sm text-gray-700">修改密码</span>
                            </div>
                            <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </div>
                        
                        <!-- <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                                    <svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                                    </svg>
                                </div>
                                <span class="ml-3 text-sm text-gray-700">通知设置</span>
                            </div>
                            <div class="relative inline-block w-10 mr-2 align-middle select-none">
                                <input type="checkbox" name="toggle" id="notification-toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer checked:right-0 checked:border-primary transition-all duration-200 ease-in-out" checked>
                                <label for="notification-toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                            </div>
                        </div> -->
                       
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                                    <svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path>
                                    </svg>
                                </div>
                                <span class="ml-3 text-sm text-gray-700">清除缓存</span>
                            </div>
                            <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </div>
                        
                        <div class="pt-4 border-t border-gray-100">
                            <button id="logout-btn-profile" class="w-full flex items-center justify-center px-4 py-2 border border-red-300 rounded-lg shadow-sm text-sm font-medium text-red-700 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                                <!-- <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4V4"></path>
                                </svg> -->
                                退出登录
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="stats-page" class="hidden p-4">
                <div class="bg-white rounded-xl p-4 mb-6 card-shadow">
                    <h3 class="text-sm font-medium text-gray-600">积分排行榜</h3>
                    <div class="mt-3 h-64">
                        <canvas id="stats-points-chart"></canvas>
                    </div>
                    <div class="flex justify-end mt-2">
                        <button class="text-xs text-primary hover:text-accent view-more-stats-btn" data-type="points">查看更多</button>
                    </div>
                </div>
                <div class="bg-white rounded-xl p-4 mb-6 card-shadow">
                    <h3 class="text-sm font-medium text-gray-600">答题数量排行榜</h3>
                    <div class="mt-3 h-64">
                        <canvas id="stats-answers-chart"></canvas>
                    </div>
                    <div class="flex justify-end mt-2">
                        <button class="text-xs text-primary hover:text-accent view-more-stats-btn" data-type="answers">查看更多</button>
                    </div>
                </div>
                <div class="bg-white rounded-xl p-4 card-shadow">
                    <h3 class="text-sm font-medium text-gray-600">正确率排行榜</h3>
                    <div class="mt-3 h-64">
                        <canvas id="stats-accuracy-chart"></canvas>
                    </div>
                    <div class="flex justify-end mt-2">
                        <button class="text-xs text-primary hover:text-accent view-more-stats-btn" data-type="accuracy">查看更多</button>
                    </div>
                </div>
            </div>
        </main>

        <!-- 底部Tab导航 -->
        <nav class="bg-white tab-shadow z-10">
            <div class="container mx-auto px-4">
                <div class="flex justify-around">
                    <button class="tab-btn flex flex-col items-center py-2 px-4 text-primary" data-tab="home-page">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-xs mt-1">首页</span>
                    </button>
                    
                    <button class="tab-btn flex flex-col items-center py-2 px-4 text-gray-500" data-tab="quiz-page">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-xs mt-1">答题</span>
                    </button>
                    
                    <button class="tab-btn flex flex-col items-center py-2 px-4 text-gray-500" data-tab="materials-page">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-xs mt-1">资料</span>
                    </button>
                    
                    <button class="tab-btn flex flex-col items-center py-2 px-4 text-gray-500" data-tab="stats-page">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V3zm0 6a1 1 0 011-1h8a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V9zm0 6a1 1 0 011-1h4a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-xs mt-1">统计</span>
                    </button>
                    <button class="tab-btn flex flex-col items-center py-2 px-4 text-gray-500" data-tab="profile-page">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-xs mt-1">我的</span>
                    </button>
                </div>
            </div>
        </nav>
    </div>

    <!-- 排行榜弹窗 -->
    <div id="ranking-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-xl w-full max-w-md mx-4 max-h-[80vh] overflow-hidden">
            <div class="flex items-center justify-between p-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-800">排行榜</h3>
                <button id="close-ranking-modal" class="text-gray-400 hover:text-gray-500">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            
            <div class="flex border-b border-gray-200">
                <button class="ranking-tab flex-1 py-3 text-center text-sm font-medium text-primary border-b-2 border-primary">科室排名</button>
                <button class="ranking-tab flex-1 py-3 text-center text-sm font-medium text-gray-500">个人排名</button>
            </div>
            
            <div class="overflow-y-auto max-h-[calc(80vh-120px)]">
                <div class="divide-y divide-gray-100">
                    <div class="flex items-center p-4 bg-yellow-50">
                        <div class="w-8 h-8 bg-yellow-400 text-white rounded-full flex items-center justify-center text-sm font-bold">2</div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-800">调度二室</p>
                            <p class="text-xs text-gray-500">平均积分：85分</p>
                        </div>
                        <div class="ml-auto text-primary font-medium">85</div>
                    </div>
                    
                    <div class="flex items-center p-4 bg-blue-50">
                        <div class="w-8 h-8 bg-blue-400 text-white rounded-full flex items-center justify-center text-sm font-bold">1</div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-800">调度一室</p>
                            <p class="text-xs text-gray-500">平均积分：92分</p>
                        </div>
                        <div class="ml-auto text-primary font-medium">92</div>
                    </div>
                    
                    <div class="flex items-center p-4 bg-orange-50">
                        <div class="w-8 h-8 bg-orange-400 text-white rounded-full flex items-center justify-center text-sm font-bold">3</div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-800">调度三室</p>
                            <p class="text-xs text-gray-500">平均积分：78分</p>
                        </div>
                        <div class="ml-auto text-primary font-medium">78</div>
                    </div>
                    
                    <div class="flex items-center p-4">
                        <div class="w-8 h-8 bg-gray-200 text-gray-700 rounded-full flex items-center justify-center text-sm font-bold">4</div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-800">技术科</p>
                            <p class="text-xs text-gray-500">平均积分：72分</p>
                        </div>
                        <div class="ml-auto text-primary font-medium">72</div>
                    </div>
                    
                    <div class="flex items-center p-4">
                        <div class="w-8 h-8 bg-gray-200 text-gray-700 rounded-full flex items-center justify-center text-sm font-bold">5</div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-800">安全科</p>
                            <p class="text-xs text-gray-500">平均积分：65分</p>
                        </div>
                        <div class="ml-auto text-primary font-medium">65</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- PDF查看器弹窗 -->
    <div id="pdf-viewer-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-xl w-full max-w-4xl mx-4 max-h-[90vh] overflow-hidden">
            <div class="flex items-center justify-between p-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-800">调度操作规程</h3>
                <button id="close-pdf-modal" class="text-gray-400 hover:text-gray-500">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            
            <div class="bg-gray-100 p-4 flex items-center justify-center">
                <div class="bg-white rounded shadow-sm w-full max-w-2xl aspect-[4/3] flex items-center justify-center">
                    <div class="text-center">
                        <div class="w-16 h-16 bg-red-100 text-red-500 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path>
                            </svg>
                        </div>
                        <p class="text-gray-500">PDF文档预览区域</p>
                        <p class="text-xs text-gray-400 mt-2">此处将显示PDF文档内容</p>
                    </div>
                </div>
            </div>
            
            <div class="flex justify-between p-4 border-t border-gray-200">
                <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
                    下载文档
                </button>
                <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-accent">
                    全屏查看
                </button>
            </div>
        </div>
    </div>

    <style>
        /* 自定义样式 */
        .toggle-checkbox:checked {
            right: 0;
            border-color: #3b82f6;
        }
        .toggle-checkbox:checked + .toggle-label {
            background-color: #3b82f6;
        }
        
        /* 页面切换动画 */
        .page-transition {
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        .page-enter {
            opacity: 0;
            transform: translateY(20px);
        }
        .page-enter-active {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* 倒计时动画 */
        @keyframes countdown {
            0% {
                stroke-dashoffset: 0;
            }
            100% {
                stroke-dashoffset: 283;
            }
        }
        .countdown-animation {
            animation: countdown 60s linear forwards;
        }
    </style>

    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 模拟数据
            const userData = {
                userId: "user123",
                username: "张三",
                department: "调度一室",
                avatar: "avatar-url.png",
                score: 1250,
                departmentRank: 3,
                overallRank: 15,
                totalAnswers: 120,
                correctRate: 85,
                practiceRecords: [],
                wrongQuestions: []
            };
            
            // 登录表单提交
            const loginForm = document.getElementById('login-form');
            const loginPage = document.getElementById('login-page');
            const appPage = document.getElementById('app-page');
            
            loginForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const username = document.getElementById('username').value;
                const password = document.getElementById('password').value;
                
                // 简单验证
                if (username && password) {
                    // 隐藏登录页，显示应用页
                    loginPage.classList.add('hidden');
                    appPage.classList.remove('hidden');
                    
                    // 初始化图表
                    initCharts();
                }
            });
            
            // 底部Tab导航
            const tabBtns = document.querySelectorAll('.tab-btn');
            const pages = document.querySelectorAll('#app-page main > div');
            const pageTitle = document.getElementById('page-title');
            
            tabBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const targetTab = this.getAttribute('data-tab');
                    
                    // 更新Tab按钮样式
                    tabBtns.forEach(b => {
                        b.classList.remove('text-primary');
                        b.classList.add('text-gray-500');
                    });
                    this.classList.remove('text-gray-500');
                    this.classList.add('text-primary');
                    
                    // 更新页面标题
                    const titles = {
                        'home-page': '首页',
                        'quiz-page': '答题',
                        'materials-page': '资料',
                        'stats-page': '统计',
                        'profile-page': '我的'
                    };
                    pageTitle.textContent = titles[targetTab] || '首页';
                    
                    // 显示目标页面，隐藏其他页面
                    pages.forEach(page => {
                        if (page.id === targetTab) {
                            // 添加动画效果
                            page.classList.remove('hidden');
                            page.classList.add('page-enter');
                            setTimeout(() => {
                                page.classList.add('page-enter-active');
                            }, 10);
                            setTimeout(() => {
                                page.classList.remove('page-enter', 'page-enter-active');
                            }, 300);
                        } else {
                            page.classList.add('hidden');
                        }
                    });
                });
            });
            
            // 用户菜单下拉
            const userMenuBtn = document.getElementById('user-menu-btn');
            const userDropdown = document.getElementById('user-dropdown');
            
            userMenuBtn.addEventListener('click', function() {
                userDropdown.classList.toggle('hidden');
            });
            
            // 点击页面其他地方关闭下拉菜单
            document.addEventListener('click', function(e) {
                if (!userMenuBtn.contains(e.target) && !userDropdown.contains(e.target)) {
                    userDropdown.classList.add('hidden');
                }
            });
            
            // 退出登录
            const logoutBtn = document.getElementById('logout-btn');
            const logoutBtnProfile = document.getElementById('logout-btn-profile');
            
            logoutBtn.addEventListener('click', function(e) {
                e.preventDefault();
                appPage.classList.add('hidden');
                loginPage.classList.remove('hidden');
            });
            
            if (logoutBtnProfile) {
                logoutBtnProfile.addEventListener('click', function(e) {
                    e.preventDefault();
                    appPage.classList.add('hidden');
                    loginPage.classList.remove('hidden');
                });
            }
            
            // 排行榜弹窗
            const viewAllRanksBtn = document.getElementById('view-all-ranks-btn');
            const rankingModal = document.getElementById('ranking-modal');
            const closeRankingModal = document.getElementById('close-ranking-modal');
            const rankingTabs = document.querySelectorAll('.ranking-tab');
            
            if (viewAllRanksBtn) {
                viewAllRanksBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    rankingModal.classList.remove('hidden');
                });
            }
            
            const viewMoreStatsBtns = document.querySelectorAll('.view-more-stats-btn');
            viewMoreStatsBtns.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    rankingModal.classList.remove('hidden');
                });
            });
            
            if (closeRankingModal) {
                closeRankingModal.addEventListener('click', function() {
                    rankingModal.classList.add('hidden');
                });
            }
            
            if (rankingTabs && rankingTabs.length > 0) {
                rankingTabs.forEach(tab => {
                    tab.addEventListener('click', function() {
                        rankingTabs.forEach(t => {
                            t.classList.remove('text-primary', 'border-b-2', 'border-primary');
                            t.classList.add('text-gray-500');
                        });
                        this.classList.remove('text-gray-500');
                        this.classList.add('text-primary', 'border-b-2', 'border-primary');
                        
                        // 这里可以添加切换排名类型的逻辑
                    });
                });
            }
            
            // PDF查看器弹窗
            const pdfButtons = document.querySelectorAll('.material-category + div button');
            const pdfViewerModal = document.getElementById('pdf-viewer-modal');
            const closePdfModal = document.getElementById('close-pdf-modal');
            
            if (pdfButtons && pdfButtons.length > 0) {
                pdfButtons.forEach(btn => {
                    btn.addEventListener('click', function(e) {
                        e.preventDefault();
                        if (pdfViewerModal) {
                            pdfViewerModal.classList.remove('hidden');
                        }
                    });
                });
            }
            
            if (closePdfModal) {
                closePdfModal.addEventListener('click', function() {
                    if (pdfViewerModal) {
                        pdfViewerModal.classList.add('hidden');
                    }
                });
            }
            
            // 答题功能
            const startQuizBtn = document.getElementById('start-quiz-btn');
            const quizPage = document.getElementById('quiz-page');
            const quizOptions = document.querySelectorAll('.quiz-option');
            const prevQuestionBtn = document.getElementById('prev-question-btn');
            const nextQuestionBtn = document.getElementById('next-question-btn');
            const quizTimer = document.getElementById('quiz-timer');
            
            if (startQuizBtn) {
                startQuizBtn.addEventListener('click', function() {
                    // 切换到答题页面
                    if (tabBtns && tabBtns.length > 0) {
                        tabBtns.forEach(b => {
                            b.classList.remove('text-primary');
                            b.classList.add('text-gray-500');
                            if (b.getAttribute('data-tab') === 'quiz-page') {
                                b.classList.remove('text-gray-500');
                                b.classList.add('text-primary');
                            }
                        });
                    }
                    
                    if (pageTitle) {
                        pageTitle.textContent = '答题';
                    }
                    
                    if (pages && pages.length > 0) {
                        pages.forEach(page => {
                            page.classList.add('hidden');
                            if (page.id === 'quiz-page') {
                                page.classList.remove('hidden');
                                // 添加动画效果
                                page.classList.add('page-enter');
                                setTimeout(() => {
                                    page.classList.add('page-enter-active');
                                }, 10);
                                setTimeout(() => {
                                    page.classList.remove('page-enter', 'page-enter-active');
                                }, 300);
                            }
                        });
                    }
                    
                    // 开始倒计时
                    startCountdown();
                });
            }
            
            if (quizOptions && quizOptions.length > 0) {
                quizOptions.forEach(option => {
                    option.addEventListener('click', function() {
                        const radio = this.querySelector('input[type="radio"]');
                        if (radio) {
                            radio.checked = true;
                            
                            // 清除其他选项的选中样式
                            quizOptions.forEach(opt => {
                                opt.classList.remove('border-primary', 'bg-blue-50');
                            });
                            
                            // 添加当前选项的选中样式
                            this.classList.add('border-primary', 'bg-blue-50');
                        }
                    });
                });
            }
            
            if (nextQuestionBtn) {
                nextQuestionBtn.addEventListener('click', function() {
                    // 这里可以添加切换到下一题的逻辑
                    // 清除所有选项的选中状态
                    if (quizOptions && quizOptions.length > 0) {
                        quizOptions.forEach(opt => {
                            opt.classList.remove('border-primary', 'bg-blue-50');
                            const radio = opt.querySelector('input[type="radio"]');
                            if (radio) {
                                radio.checked = false;
                            }
                        });
                    }
                    
                    // 更新问题计数
                    const questionCounter = document.querySelector('.quiz-page .flex.items-center.justify-between.mb-4 span:first-child');
                    if (questionCounter) {
                        questionCounter.textContent = '问题 2/10';
                    }
                    
                    // 启用上一题按钮
                    if (prevQuestionBtn) {
                        prevQuestionBtn.disabled = false;
                    }
                    
                    // 重置倒计时
                    resetCountdown();
                });
            }
            
            if (prevQuestionBtn) {
                prevQuestionBtn.addEventListener('click', function() {
                    // 这里可以添加切换到上一题的逻辑
                    // 清除所有选项的选中状态
                    if (quizOptions && quizOptions.length > 0) {
                        quizOptions.forEach(opt => {
                            opt.classList.remove('border-primary', 'bg-blue-50');
                            const radio = opt.querySelector('input[type="radio"]');
                            if (radio) {
                                radio.checked = false;
                            }
                        });
                    }
                    
                    // 更新问题计数
                    const questionCounter = document.querySelector('.quiz-page .flex.items-center.justify-between.mb-4 span:first-child');
                    if (questionCounter) {
                        questionCounter.textContent = '问题 1/10';
                    }
                    
                    // 禁用上一题按钮
                    prevQuestionBtn.disabled = true;
                    
                    // 重置倒计时
                    resetCountdown();
                });
            }
            
            // 倒计时功能
            let countdownInterval;
            let countdownTime = 60;
            
            function startCountdown() {
                if (!quizTimer) return;
                
                countdownTime = 60;
                quizTimer.textContent = `${countdownTime}秒`;
                
                countdownInterval = setInterval(() => {
                    countdownTime--;
                    if (quizTimer) {
                        quizTimer.textContent = `${countdownTime}秒`;
                        
                        if (countdownTime <= 10) {
                            quizTimer.classList.add('text-red-500', 'font-bold');
                        } else {
                            quizTimer.classList.remove('text-red-500', 'font-bold');
                        }
                    }
                    
                    if (countdownTime <= 0) {
                        clearInterval(countdownInterval);
                        // 这里可以添加时间到自动提交的逻辑
                        alert('时间到！自动提交答案。');
                    }
                }, 1000);
            }
            
            function resetCountdown() {
                clearInterval(countdownInterval);
                if (quizTimer) {
                    quizTimer.classList.remove('text-red-500', 'font-bold');
                }
                startCountdown();
            }
            
            // 初始化图表
            function initCharts() {
                // 已移除科室内排名圆环图
                
                // 已移除整体排名圆环图
                
                // 学习进度图表（最近6个月答题数量）
                const learningProgressEl = document.getElementById('learning-progress-chart');
                if (learningProgressEl) {
                    const learningProgressCtx = learningProgressEl.getContext('2d');
                    const lastSixMonthsLabels = (() => {
                        const labels = [];
                        const now = new Date();
                        for (let i = 5; i >= 0; i--) {
                            const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
                            labels.push(`${d.getMonth() + 1}月`);
                        }
                        return labels;
                    })();
                    new Chart(learningProgressCtx, {
                        type: 'line',
                        data: {
                            labels: lastSixMonthsLabels,
                            datasets: [{
                                label: '答题数量',
                                data: [32, 28, 45, 38, 52, 47],
                                borderColor: '#3b82f6',
                                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                                tension: 0.4,
                                fill: true,
                                pointRadius: 3,
                                pointBackgroundColor: '#3b82f6'
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: { display: false }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    grid: { color: 'rgba(0, 0, 0, 0.05)' }
                                },
                                x: {
                                    grid: { display: false }
                                }
                            }
                        }
                    });
                }

                // 最近6个月整体排名趋势图
                const overallRankTrendEl = document.getElementById('overall-rank-trend-chart');
                if (overallRankTrendEl) {
                    const overallRankTrendCtx = overallRankTrendEl.getContext('2d');
                    const lastSixMonthsLabels = (() => {
                        const labels = [];
                        const now = new Date();
                        for (let i = 5; i >= 0; i--) {
                            const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
                            labels.push(`${d.getMonth() + 1}月`);
                        }
                        return labels;
                    })();
                    new Chart(overallRankTrendCtx, {
                        type: 'line',
                        data: {
                            labels: lastSixMonthsLabels,
                            datasets: [{
                                label: '整体排名',
                                data: [20, 18, 15, 16, 12, 10],
                                borderColor: '#ef4444',
                                backgroundColor: 'rgba(239, 68, 68, 0.1)',
                                tension: 0.4,
                                fill: true,
                                pointRadius: 3,
                                pointBackgroundColor: '#ef4444'
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: { display: false }
                            },
                            scales: {
                                y: {
                                    reverse: true,
                                    beginAtZero: false,
                                    suggestedMin: 1,
                                    suggestedMax: 30,
                                    grid: { color: 'rgba(0, 0, 0, 0.05)' }
                                },
                                x: {
                                    grid: { display: false }
                                }
                            }
                        }
                    });
                }
                // 统计页排行榜图表
                const statsPointsEl = document.getElementById('stats-points-chart');
                if (statsPointsEl) {
                    const ctx = statsPointsEl.getContext('2d');
                    new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: ['用户01','用户02','用户03','用户04','用户05','用户06','用户07','用户08','用户09','用户10'],
                            datasets: [{
                                label: '积分',
                                data: [1250, 1200, 1180, 1120, 1100, 1050, 1020, 980, 950, 900],
                                backgroundColor: '#3b82f6'
                            }]
                        },
                        options: {
                            indexAxis: 'y',
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: { legend: { display: false } },
                            scales: {
                                x: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.05)' } },
                                y: { grid: { display: false } }
                            }
                        }
                    });
                }

                const statsAnswersEl = document.getElementById('stats-answers-chart');
                if (statsAnswersEl) {
                    const ctx = statsAnswersEl.getContext('2d');
                    new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: ['用户01','用户02','用户03','用户04','用户05','用户06','用户07','用户08','用户09','用户10'],
                            datasets: [{
                                label: '答题数量',
                                data: [150, 145, 140, 135, 130, 125, 120, 115, 110, 105],
                                backgroundColor: '#10b981'
                            }]
                        },
                        options: {
                            indexAxis: 'y',
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: { legend: { display: false } },
                            scales: {
                                x: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.05)' } },
                                y: { grid: { display: false } }
                            }
                        }
                    });
                }

                const statsAccuracyEl = document.getElementById('stats-accuracy-chart');
                if (statsAccuracyEl) {
                    const ctx = statsAccuracyEl.getContext('2d');
                    new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: ['用户01','用户02','用户03','用户04','用户05','用户06','用户07','用户08','用户09','用户10'],
                            datasets: [{
                                label: '正确率(%)',
                                data: [98, 96, 95, 94, 93, 92, 90, 88, 87, 85],
                                backgroundColor: '#f59e0b'
                            }]
                        },
                        options: {
                            indexAxis: 'y',
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: { legend: { display: false } },
                            scales: {
                                x: { beginAtZero: true, suggestedMax: 100, grid: { color: 'rgba(0,0,0,0.05)' } },
                                y: { grid: { display: false } }
                            }
                        }
                    });
                }
            }
            
            // 资料分类切换
            const materialCategories = document.querySelectorAll('.material-category');
            
            materialCategories.forEach(category => {
                category.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 更新分类样式
                    materialCategories.forEach(c => {
                        c.classList.remove('text-primary', 'bg-blue-50');
                        c.classList.add('text-gray-700', 'hover:bg-gray-50');
                    });
                    this.classList.remove('text-gray-700', 'hover:bg-gray-50');
                    this.classList.add('text-primary', 'bg-blue-50');
                    
                    // 这里可以添加切换资料列表的逻辑
                });
            });
            
            // 通知设置切换
            const notificationToggle = document.getElementById('notification-toggle');
            
            if (notificationToggle) {
                notificationToggle.addEventListener('change', function() {
                    // 这里可以添加保存通知设置的逻辑
                    console.log('通知设置已更新为:', this.checked);
                });
            }
        });
    </script>
</body>
</html>
